<template>
    <div class="newfriend">
        <topnav>新朋友</topnav>
        <div class="applyinfor" v-for="item in newfriends" :key="item.callcode">
            <div class="reqinfor">
                <div class="headimg">你好</div>
                <div class="infortext">
                    <div>{{item.name}}</div>
                    <div>{{item.callcode}}</div>
                </div>
            </div>
            <div class="applytext">{{item.msg}}</div>
            <button @click="yesapply(item.callcode)">同意</button>
        </div>
    </div>
</template>

<script>
import { computed } from 'vue';
import axios from 'axios';
import Infor from '../store/friendlist';
import Topnav from '../components/public/Topnav.vue';

export default {
  name: 'Newfriend',
  components: {
    Topnav,
  },
  setup() {
    const newfriends = computed(() => Infor.state.newfriend);
    function yesapply(event) {
      const token = JSON.parse(window.sessionStorage.getItem('token'));
      axios({
        method: 'post',
        url: 'http://1.14.122.88:5001/friend/friendapply',
        headers: { authorization: token },
        data: { call: event },
      }).then(
        (response) => {
          if (response.data.status === 2) {
            // eslint-disable-next-line
            window.alert(response.data.message);
          }
          if (response.data.status === 1) {
            // eslint-disable-next-line
            window.alert('添加失败', response.data.message);
          }
        },
        (error) => {
          console.log(error.message);
        },
      );
    }
    return {
      newfriends,
      yesapply,
    };
  },
};
</script>

<style scoped>
    .applyinfor {
        padding: 10px;
        margin-top: 50px;
    }

    .reqinfor {
        display: flex;
        margin-bottom: 10px;
    }

    .headimg {
        width: 40px;
        height: 40px;
    }

    .applytext {
        width: 100%;
        margin-bottom: 10px;
        background-color: #ffffff;
        border-radius: 5px;
    }

    .applyinfor button {
        border: none;
        border-radius: 5px;
        background-color: #28c8ff;
        height: 30px;
    }
</style>
